<template>
    <div class="right content">
        <h3>加载ION服务</h3>
        <button @click="addIonLayer">添加ion影像</button>
        <button @click="addIonTerrain">添加ion地形</button>
        <button @click="addIonTileset">添加模型</button>
        <hr>
        <h3>加载天地图</h3>
        <button @click="addTianLayer('1')">添加墨卡托投影影像</button>
        <button @click="addTianLayer('2')">添加经纬度投影矢量</button>
        <hr>
        <button @click="removeLayer">移除全部</button>
    </div>
</template>

<script setup>
import { onBeforeUnmount, ref } from 'vue'
import { tianJson } from './data';
import getMyProjectManager from '@/scripts/getMyProjectManager';
import { ES3DTileset, ESImageryLayer, ESTerrainLayer } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
const pm = getMyProjectManager();

pm.activeViewer.ionAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NTkxOWQ4Ni1iYTg3LTQyMTItYWQwYy05MDQwMWVmYjFlOTMiLCJpZCI6MTIwNTIzLCJpYXQiOjE3MjA3NzY4Njh9.7FCmKvSX8wZDfjrPLEOkk7ZF_o4mDZ6Oa_KzGPPFm4c';

let ionLayer, ionTerrain, ionTileset, tianLayer, tianLayer1;

const removeLayer = () => {
    ionLayer && pm.destroySceneObject(ionLayer);
    ionTerrain && pm.destroySceneObject(ionTerrain);
    ionTileset && pm.destroySceneObject(ionTileset);
    tianLayer && pm.destroySceneObject(tianLayer);
    tianLayer1 && pm.destroySceneObject(tianLayer1);
    ionLayer = ionTerrain = ionTileset = tianLayer = tianLayer1 = null;
}
onBeforeUnmount(() => { removeLayer(); })

const addIonLayer = () => {
    if (ionLayer) return;
    const sceneObject = pm.createSceneObjectFromClass(ESImageryLayer);
    if (!sceneObject) return;
    ionLayer = sceneObject;
    sceneObject.url = "ion://3";
    sceneObject.zIndex = 1;
    sceneObject.flyTo();
}

const addIonTerrain = () => {
    if (ionTerrain) return;
    const sceneObject = pm.createSceneObjectFromClass(ESTerrainLayer);
    if (!sceneObject) return;
    ionTerrain = sceneObject;
    sceneObject.url = "ion://1";
}

const addIonTileset = () => {
    if (ionTileset) {
        ionTileset.flyTo();
        return;
    }
    const sceneObject = pm.createSceneObjectFromClass(ES3DTileset);
    if (!sceneObject) return;
    ionTileset = sceneObject;
    sceneObject.url = 'ion://1415196';
    sceneObject.d(sceneObject.czmTilesetReadyEvent.donce(() => {
        sceneObject.flyTo();
        Message.success("cesium ion 3DTileset 加载完成!");
    }));

}

const addTianLayer = (type) => {
    if (type === '1') {
        if (tianLayer) return;
        const sceneObject = pm.createSceneObjectFromClass(ESImageryLayer);
        if (!sceneObject) return;
        ionTileset = sceneObject;
        sceneObject.url = 'http://t0.tianditu.gov.cn/img_w/wmts?tk=615add697cb9abe12a3efdfcd7fcf8a1';
    } else if (type === '2') {
        // http://t0.tianditu.gov.cn/ter_c/wmts?tk=615add697cb9abe12a3efdfcd7fcf8a1
        if (tianLayer1) return;
        const sceneObject = pm.createSceneObjectFromJson(tianJson);
        if (!sceneObject) return;
        tianLayer1 = sceneObject;
    }

}



</script>

<style scoped>
.right {
    width: 100%;
    height: 100%;
    background: url(../../assets/right/kuang.png) no-repeat;
    background-size: 100% 100%;
}

.content {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.content button {
    padding: 10px 50px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>
